<template>
  <div class="container">
    <div class="filter-section">
      <el-form :inline="true" class="filter-form">
        <el-form-item label="设备类型">
          <el-select v-model="deviceType" placeholder="请选择" style="width: 150px;">
            <el-option label="请选择" value="请选择"></el-option>
            <el-option label="类型1" value="type1"></el-option>
            <el-option label="类型2" value="type2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="status" placeholder="请选择" style="width: 150px;">
            <el-option label="请选择" value="请选择"></el-option>
            <el-option label="已借" value="borrowed"></el-option>
            <el-option label="已还" value="returned"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="借用日期">
          <el-date-picker v-model="borrowDateRange" type="daterange" range-separator="至" start-placeholder="请选择日期"
            end-placeholder="请选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="搜索">
          <el-input v-model="searchKey" placeholder="设备编号/借用人/归还人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="primary" @click="handleAdd" style="margin-left: 10px">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column label="设备类型" prop="deviceType"></el-table-column>
      <el-table-column label="设备编号" prop="deviceCode"></el-table-column>
      <el-table-column label="借用人" prop="borrower"></el-table-column>
      <el-table-column label="借用日期" prop="borrowDate"></el-table-column>
      <el-table-column label="当前使用人" prop="currentUser"></el-table-column>
      <el-table-column label="归还人" prop="returner"></el-table-column>
      <el-table-column label="归还日期" prop="returnDate"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <span v-if="row.status === 'returned'">归还</span>
          <span v-else-if="row.status === 'borrowed'">借用中</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-section">
      <el-pagination @current-change="handleCurrentChange" :page-size="10" :current-page="currentPage" :total="total"
        layout="prev, pager, next, go-to"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const deviceType = ref('请选择');
const status = ref('请选择');
const borrowDateRange = ref([]);
const searchKey = ref('');
const tableData = ref([
  {
    deviceType: '类型1',
    deviceCode: '设备1',
    borrower: '张三',
    borrowDate: '2025-05-01',
    currentUser: '张三',
    returner: '',
    returnDate: '',
    status: 'borrowed'
  },
  {
    deviceType: '类型2',
    deviceCode: '设备2',
    borrower: '李四',
    borrowDate: '2025-05-02',
    currentUser: '李四',
    returner: '李四',
    returnDate: '2025-05-03',
    status: 'returned'
  }
]);
const currentPage = ref(1);
const total = ref(20);

const handleQuery = () => {
  console.log('查询条件', {
    deviceType: deviceType.value,
    status: status.value,
    borrowDateRange: borrowDateRange.value,
    searchKey: searchKey.value
  });
  // 此处可调用实际接口获取数据并更新 tableData
};

const handleAdd = () => {
  console.log('触发添加操作');
  // 可在此处实现跳转到添加页面或弹出添加窗口的逻辑
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  handleQuery(); // 切换页码时重新查询数据
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 10px;
}

.pagination-section {
  text-align: right;
  margin-top: 20px;
}

.el-table {
  margin-top: 10px;
}
</style>